// @ts-nocheck
import {useState, useRef} from 'react'
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import {
  Button,
  Popconfirm as Confirm,
  Divider,
  message,
  Modal,
  Upload,
  Spin,
  Row,
  Col
} from 'antd'
import {PlusOutlined, UploadOutlined, ImportOutlined, DownloadOutlined} from '@ant-design/icons'
import ProTable from '@ant-design/pro-table'
import CreateModify from './extra/createModify'
import {queryAddress, delAddress, importResource, downloadResource} from '@/services/address'
import {authority} from "@/tools/tool";
import {useModel, Access} from 'umi'
import DistrictSelect from '@/components/Select/DistrictSelect'
import SubDistrictSelect from "@/components/Select/SubDistrictSelect";
import CommunitySelect from "@/components/Select/CommunitySelect";
import ExcelData from "@/components/Common/ExcelData";

const Index = () => {
  const init = useModel('@@initialState');
  const keys = ['城市', '所属区域', '所属街道', '所属园区', '蓝牌地址']
  const {currentUser} = init.initialState
  const [visible, setVisible] = useState(false)
  const [data, setData] = useState({})
  const [mode, setMode] = useState('create')
  const [district, setDistrict] = useState(null)
  const [subDistrict, setSubDistrict] = useState(null)
  const [importVisible, setImport] = useState(false)
  const actionRef = useRef()
  const columns = [
    {
      title: '园区名称',
      dataIndex: 'name',
    },
    {
      title: '所属区域',
      dataIndex: 'district_id',
      renderFormItem: () => <DistrictSelect onChange={(e) => setDistrict(e)}/>,
      render: (_, row) => row.district_name
    },
    {
      title: '所属街道',
      dataIndex: 'subdistrict_id',
      renderFormItem: () => <SubDistrictSelect back={false} onChange={(e) => setSubDistrict(e)} district={district}/>,
      render: (_, row) => row.subdistrict_name
    },
    {
      title: '所属园区',
      dataIndex: 'community_id',
      renderFormItem: () => <CommunitySelect back={false} subDistrict={subDistrict}/>,
      render: (_, row) => row.community_name
    },
    {
      title: '操作',
      width: 150,
      valueType: 'option',
      render: (_: any, row: any) => [
        <Access key={'1'} accessible={authority('28', currentUser.operation)}>
          <a onClick={() => {
            setMode('modify');
            setData(row);
            setVisible(true)
          }}>
            编辑
          </a>
        </Access>,
        <Divider key={'2'} type="vertical"/>,
        <Access key={'3'} accessible={authority('29', currentUser.operation)}>
          <Confirm
            title="确认删除当前蓝牌地址吗?"
            okText="确认"
            onConfirm={() => delAddress({address_id: row.address_id}).then(res => {
              if (res.status === 200) {
                message.success(res.message).then()
                actionRef.current.reload()
              } else {
                message.error('删除失败！').then()
              }
            })}
            cancelText="取消"
          >
            <a>删除</a>
          </Confirm>
        </Access>

      ],
    },
  ]

  const download = () => {
    downloadResource().then(res => {
      const blob = new Blob([res], {type: 'application/vnd.ms-excel;charset=utf-8'});
      const a = document.createElement('a');
      a.href = window.URL.createObjectURL(blob)
      a.download = decodeURIComponent(`资源表样例.xls`);
      document.body.appendChild(a);
      a.click();
      message.success('下载成功').then()
    })
  }
  const handleImport = (e) => {
    console.log(JSON.stringify(e))
    importResource({list: e}).then(res => {
      if (res.status === 200) {
        message.success(res.message).then()
        setImport(false)
        actionRef.current.reload()
      } else {
        message.error('导入失败!').then()
      }
    })

  }
  return (
    <PageHeaderWrapper>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        request={(params) => queryAddress({...params})}
        toolBarRender={() => [
          <Access key={'1'} accessible={authority('44', currentUser.operation)}>
            <Button key="button" icon={<DownloadOutlined/>} type="primary" onClick={() => download()}>
              下载资源表样例
            </Button>
          </Access>,
          <Access key={'2'} accessible={authority('41', currentUser.operation)}>
            <Button key="button" icon={<ImportOutlined/>} type="primary" onClick={() => {
              setImport(true)
            }}>
              导入资源表
            </Button>
          </Access>,
          <Access key={'3'} accessible={authority('27', currentUser.operation)}>
            <Button key="button" icon={<PlusOutlined/>} type="primary" onClick={() => {
              setMode('create');
              setVisible(true)
            }}>
              新建蓝牌地址
            </Button>
          </Access>
        ]}
      />
      <CreateModify
        mode={mode}
        visible={visible}
        data={data}
        onClose={() => setVisible(false)}
        onOk={() => {
          setVisible(false);
          actionRef.current.reload()
        }}
      />
      <ExcelData
        keyList={keys}
        visible={importVisible}
        onClose={() => setImport(false)}
        onOk={(e) => handleImport(e)}
      />
    </PageHeaderWrapper>
  );
};

export default Index;
